<template>
  <div>
    <el-dialog
      :title="isEdit ? '编辑部门' : '新增部门'"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <template>
        <div>
          <el-form ref="deptForm" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="部门名称" prop="name">
              <el-input
                v-model="form.name"
                style="width: 80%"
                placeholder="1-50个字符"
              />
            </el-form-item>
            <el-form-item label="部门编码" prop="code">
              <el-input
                v-model="form.code"
                style="width: 80%"
                placeholder="1-50个字符"
              />
            </el-form-item>
            <el-form-item label="部门负责人" prop="manager">
              <el-select
                v-model="form.manager"
                style="width: 80%"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in employeeList"
                  :key="item.id"
                  :value="item.username"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="部门介绍" prop="introduce">
              <el-input
                v-model="form.introduce"
                style="width: 80%"
                placeholder="1-300个字符"
                type="textarea"
                :rows="3"
              />
            </el-form-item>
          </el-form>
        </div>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelFn">取 消</el-button>
        <el-button type="primary" @click="enterFn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getEmployeeSimpleAPI,
  addDepartmentsAPI,
  getDepartDetailAPI,
  updateDepartmentsAPI
} from '@/api'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    // 父级部门id
    parentId: {
      type: String,
      default: ''
    },
    isEdit: {
      type: Boolean
    }
  },
  data() {
    return {
      form: {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门管理者
        introduce: '' // 部门介绍
      },
      employeeList: [],
      rules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '部门名称要求1-50个字符', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '部门编码不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '部门编码要求1-50个字符', trigger: 'blur' }
        ],
        manager: [
          { required: true, message: '部门负责人不能为空', trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '部门介绍不能为空', trigger: 'blur' },
          { min: 1, max: 300, message: '部门介绍要求1-300个字符', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    dialogVisible() {
      this.getDepartmentDetailFn()
    }
  },
  created() {
    this.getEmployeesListFn()
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    // 取消按钮
    cancelFn() {
      this.$emit('closeDialog')
    },
    // 确认按钮
    async enterFn() {
      if (this.isEdit) {
        const res = await updateDepartmentsAPI({
          ...this.form,
          id: this.parentId
        })
        this.$message.success(res.message)
      } else {
        const res = await addDepartmentsAPI({
          ...this.form,
          pid: this.parentId
        })
        this.$message.success(res.message)
      }

      this.$emit('resetList')
      this.$emit('closeDialog')
    },
    async getEmployeesListFn() {
      const res = await getEmployeeSimpleAPI()
      this.employeeList = res.data
    },
    async getDepartmentDetailFn() {
      if (this.isEdit) {
        const res = await getDepartDetailAPI(this.parentId)
        console.log(res)
        this.form = res.data
      }
    }
  }
}
</script>

<style>
</style>
